<template>
    <div class="index">
        <h2>营业时间</h2>
        <div class="footer">
            <div>当前营业时间: {{showTime1}}:00~{{showTime2}}:00</div>
            <div class="ne">设置新的营业时间:</div>
            <div>
                <div>开始时间: <input type="text" v-model="date1">点</div>
                <div>结束时间: <input type="text" v-model="date2">点</div>
            </div>
            <div class="last" @click="showMake">确认修改</div>
        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                date1:'',
                date2:'',
                userId:2,
                showTime1:'',
                showTime2:'',
            }   
        },
        methods:{
            showMake(){
                console.log(this.date1,this.date2)
                this.$axios({
                    url:'/update/businessTime',
                    method:'put',
                    params:{
                        id:this.userId,
                        businessStartTime:this.date1,
                        businessEndTime:this.date2
                    }
                }).then((res)=>{
                    console.log(res);
                    this.$message({ message: '恭喜你，这是一条成功消息', type: 'success' });
                    this.firstShow();
                })
            },
               firstShow(){
                this.$axios({
                    url:'/restTime',
                    method:'get',
                    
                }).then(res=>{
                    console.log(res);
                    for(let i=0;i<res.data.data.length;i++){
                        if(res.data.data[i].id==this.userId){
                           this.showTime1=res.data.data[i].businessStartTime;
                           this.showTime2 =res.data.data[i].businessEndTime;
                        }
                    }
                })
            }
        },
        mounted(){
           this.firstShow()
        }
    }
</script>

<style lang="less" scoped>
.index{
    padding-left: 20px;
    text-align: left;
    h2{
        height: 80px;
        line-height: 80px;
        text-align: left;
    }
    .footer{
        width: 400px;
        height: 300px;
        background-color: #eee;
        padding-left: 20px;
        padding-right: 20px;
        line-height: 50px;

         input{
            width: 50px;
            height: 26px;
        }
        .last{
            width: 100%;
            height: 60px;
            background-color: rgb(47, 174, 243);
            color: white;
            text-align: center;
            line-height: 60px;
            margin-top: 20px;
            cursor:pointer;
        }
    }
}
</style>